<template>
	<view class="uploadImage">
		<view class="icon" v-if="imageUrl">
			<view class="close" @click="delImage">
				<u-icon name="close" color="#ffffff" size="24rpx"></u-icon>
			</view>
			<u-image width="200rpx" height="200rpx" :src="imageUrl" @click="viewImage">
				<view slot="error" style="font-size: 24rpx;">加载失败</view>
			</u-image>
		</view>
		<view v-else class="imgBox" @click="choseImg">
			<view class="icon">
				<u-icon name="plus" color="#999" size="36rpx"></u-icon>
				<view>选择主图</view>
			</view>
		</view>
		<view class="model" v-show="show" @click="viewImage">
			<u-image :src="imageUrl" mode="widthFix"></u-image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl: '',
				show: false
			}
		},
		props: {
			imageSrc: {
				type: String,
				default: ''
			},
			// 后端地址
			action: {
				type: String,
				default: ''
			},
			// 头部信息
			header: {
				type: Object,
				default () {
					return {};
				}
			},
			// 上传的文件字段名
			name: {
				type: String,
				default: 'image'
			},
			// 选择图片数量限制
			count: {
				type: Number,
				default: 1
			}
		},
		watch: {
			imageSrc: function(val) {
				this.imageUrl = val;
			}
		},
		methods: {
			choseImg() {
				var _this = this;
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: res => {
						uni.getImageInfo({
							src: res.tempFilePaths[0],
							success: function(image) {
								if (image.width != image.height || image.width != 720) {
									uni.showToast({
										title: '图片尺寸规格必须为720*720，图片背景要求非白色，左上角不能放文字/logo，否则审核不通过',
										icon: 'none'
									});
									return
								}
								var arr = ['jpg', 'jpeg', 'png', 'gif'];
								if (!arr.includes(image.type)) {
									uni.showToast({
										title: '上传图片类型必须为jpg或jpeg或png或gif',
										icon: 'none'
									});
									return
								}
								const isLt2M = res.tempFiles[0].size / 1024 / 1024 < 4;
								if (!isLt2M) {
									uni.showToast({
										title: '上传图片大小不能超过 4MB!',
										icon: 'none'
									});
									return
								}
								uni.showLoading({
									title: '努力上传中....'
								});
								uni.uploadFile({
									url: _this.action,
									filePath: res.tempFilePaths[0],
									name: _this.name,
									formData: _this.formData,
									header: _this.header,
									success: res => {
										// 判断是否json字符串，将其转为json格式
										let data = _this.$u.test.jsonString(res.data) ?
											JSON.parse(res
												.data) : res.data;
										if (![200, 201, 204].includes(res
												.statusCode)) {
											uni.showToast({
												title: '上传失败，请重试',
												icon: 'none'
											});
										} else {
											_this.imageUrl = data.data;
											_this.$emit('getImage', _this.imageUrl);
											uni.showToast({
												title: '上传成功',
												icon: 'none'
											});
										}
									}
								})
							}
						})
					}
				})
			},
			delImage() {
				this.imageUrl = '';
				this.$emit('getImage', this.imageUrl);
				uni.showToast({
					title: '删除成功',
					icon: 'none'
				});
			},
			viewImage() {
				this.show = !this.show;
			}
		}
	}
</script>

<style scoped>
	.uploadImage {
		width: 200rpx;
		height: 200rpx;
		border: 1px solid #dcdfe6;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;
	}

	.icon {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #999;
	}

	.close {
		position: absolute;
		top: 4rpx;
		right: 4rpx;
		background-color: red;
		width: 35rpx;
		height: 35rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
		color: white;
		z-index: 1000;
	}

	.model {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 1);
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
